import React, { useEffect, useState } from 'react';
import { Card, Col, Row, Input, Typography, Statistic, Progress, Tooltip } from 'antd';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import { RiseOutlined, FallOutlined, ApartmentOutlined, LineChartOutlined, BarChartOutlined, PieChartOutlined } from '@ant-design/icons';

const { Title, Text } = Typography;
const { Search } = Input;

interface DashboardData {
  totalEnterprises: number;
  risingEnterprises: number;
  riskEnterprises: number;
  growthTrend: number[];
  industryDistribution: { value: number; name: string }[];
}

const DashboardPage: React.FC = () => {
  const navigate = useNavigate();
  const [data, setData] = useState<DashboardData>({
    totalEnterprises: 0,
    risingEnterprises: 0,
    riskEnterprises: 0,
    growthTrend: [],
    industryDistribution: [],
  });

  useEffect(() => {
    axios
      .get<DashboardData>('http://localhost:5000/api/dashboard')
      .then((response) => setData(response.data))
      .catch((error) => console.error('Error fetching dashboard data:', error));
  }, []);

  const onSearch = (value: string) => {
    if (value.trim()) {
      navigate(`/enterprise/${encodeURIComponent(value)}`);
    }
  };

  const handleCardClick = (path: string) => {
    navigate(path);
  };

  const calcGrowthPercent = () => {
    const { totalEnterprises, risingEnterprises } = data;
    return totalEnterprises > 0 ? parseFloat(((risingEnterprises / totalEnterprises) * 100).toFixed(2)) : 0;
  };

  return (
    <div
      style={{
        padding: '24px',
        minHeight: '100vh',
        background: 'linear-gradient(to bottom, #f0f5ff, #ffffff)',
      }}
    >
      <Title
        level={2}
        style={{
          textAlign: 'center',
          marginBottom: '40px',
          color: '#1a1a1a',
          fontWeight: 700,
        }}
      >
        小微企业风险监测预警系统
      </Title>

      <Row gutter={[16, 16]} justify="center" style={{ marginBottom: '30px' }}>
        <Col span={6}>
          <Tooltip title="查看所有企业">
            <Card hoverable onClick={() => handleCardClick('/dashboard/total')}>
              <Statistic title={<Text strong>入驻总数 <ApartmentOutlined /></Text>} value={data.totalEnterprises} suffix="家" valueStyle={{ color: '#1890ff' }} />
            </Card>
          </Tooltip>
        </Col>
        <Col span={6}>
          <Tooltip title="查看发展良好的企业">
            <Card hoverable onClick={() => handleCardClick('/dashboard/rising')}>
              <Statistic title={<Text strong>上升企业 <RiseOutlined /></Text>} value={data.risingEnterprises} suffix="家" valueStyle={{ color: '#faad14' }} />
            </Card>
          </Tooltip>
        </Col>
        <Col span={6}>
          <Tooltip title="查看风险企业详情">
            <Card hoverable onClick={() => handleCardClick('/dashboard/risk')}>
              <Statistic title={<Text strong>风险企业 <FallOutlined /></Text>} value={data.riskEnterprises} suffix="家" valueStyle={{ color: '#ff4d4f' }} />
            </Card>
          </Tooltip>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic title={<Text strong>企业增长率 <LineChartOutlined /></Text>} valueRender={() => <Progress type="circle" percent={calcGrowthPercent()} strokeColor="#52c41a" />} />
          </Card>
        </Col>
      </Row>

      {/* 静态展示区域代替图表 */}
      <Row gutter={[16, 16]} style={{ marginTop: '20px' }}>
        <Col span={12}>
          <Card
            title={<><BarChartOutlined /> 热点分布</>}
            style={{ borderRadius: '12px', background: '#fafafa', textAlign: 'center' }}
          >
            <Text type="secondary">图表数据暂未上线，敬请期待</Text>
          </Card>
        </Col>
        <Col span={12}>
          <Card
            title={<><PieChartOutlined /> 时序政策</>}
            style={{ borderRadius: '12px', background: '#fafafa', textAlign: 'center' }}
          >
            <Text type="secondary">图表数据暂未上线，敬请期待</Text>
          </Card>
        </Col>
      </Row>

      <div style={{ margin: '40px 0', textAlign: 'center' }}>
        <Search
          placeholder="请输入完整的企业名称"
          allowClear
          enterButton="搜索"
          size="large"
          onSearch={onSearch}
          style={{ maxWidth: '500px' }}
        />
      </div>
    </div>
  );
};

export default DashboardPage;
